<template>
  <div id="app" style="width: 100%">
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">退货</el-breadcrumb-item>

      <el-breadcrumb-item>配送中心</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form
      style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-top:20px; "
      ref="form"
      :model="form"
      label-width="150px"
    >
      <el-input class="input" placeholder="商品名称" v-model="form.commodityName" clearable @clear="chaxun"></el-input>
      <el-date-picker
        class="input2"
        v-model="form.date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-input class="input" placeholder="供应商名称" v-model="form.supplierName" clearable @clear="chaxun"></el-input>
      <el-button class="btn1" type="primary" @click="chaxun1">查询</el-button>
    </el-form>

    <el-button class="btn1" type="primary" @click="dialogFormVisible3 = true">退货出库</el-button>
    <!-- 退货登记 -->
    <!-- <section ref="print" class="recordImg" id="printRecord">
    <div class="dayin" id="print">-->
    <el-dialog
      style="width:1200px;text-align:center;"
      title="退货登记"
      :visible.sync="dialogFormVisible3">
      <el-form :model="Return" :rules="rules" ref="Return">
        <el-form-item label="型号" style="margin-top:20px;" :label-width="formLabelWidth" prop="model">
          <el-input class="el-input" v-model="Return.model" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" style="margin-top:20px;" :label-width="formLabelWidth" prop="productName">
          <el-input class="el-input" v-model="Return.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品出库数" style="margin-top:20px;" :label-width="formLabelWidth" prop="quantityReturned">
          <el-input class="el-input" v-model="Return.quantityReturned" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" style="margin-top:20px;" :label-width="formLabelWidth" prop="remark">
          <el-input class="el-input" v-model="Return.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" style="margin-top:20px;" :label-width="formLabelWidth" prop="supplierName">
          <el-input class="el-input" v-model="Return.supplierName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" style="margin-top:20px;" :label-width="formLabelWidth" prop="unitofmeasurement">
          <el-input class="el-input" v-model="Return.unitofmeasurement" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn5" @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button
          class="btn5"
          type="primary"
          @click="dialogFormVisible3 = false;chuku();"
        >确 定</el-button>
      </div>

      <!-- <span slot="footer" class="dialog-footer">
            
                <el-button type="primary" class="btn3" @click="PrintRow">打 印</el-button>
      </span>-->
    </el-dialog>

    <!-- </div></section> -->
    <!-- 表格 -->
    <el-table ref="filterTable" v-loading="loading" :data="getCommodity" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="#" fixed></el-table-column>
      <el-table-column prop="commodityCode" label="商品编号" width="100"></el-table-column>
       <el-table-column prop="productName" label="商品名称" width="100"></el-table-column>    
      <el-table-column prop="firstClassification" label="一级分类名称" width="120"></el-table-column>
      <el-table-column prop="secondClassification" label="二级分类名称" width="120"></el-table-column>
            <el-table-column prop="supplier" label="供应商" width="100"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="costPrice" label="成本价" width="100"></el-table-column>
      <el-table-column prop="currentNumber" label="商品当前储量" width="120"></el-table-column>
      <el-table-column prop="discount" label="折扣" width="100"></el-table-column>
      <el-table-column prop="inventory" label="库存量" width="100"></el-table-column>
      <el-table-column prop="isExchange" label="可否换货" width="100">
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-switch v-model="scope.row.isExchange" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="isReturn" label="可否退货" width="100">
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-switch v-model="scope.row.isReturn" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="maximumCommodity" label="商品最大储量" width="120"></el-table-column>
      <el-table-column prop="model" label="型号" width="100"></el-table-column>
      <el-table-column prop="outOfStockNumber" label="缺货量" width="100"></el-table-column>
      <el-table-column prop="productDesccription" label="商品说明" width="100"></el-table-column> 
      <el-table-column prop="shelfLife" label="保质期限" width="160"></el-table-column>
      <el-table-column prop="unitPrice" label="单价" width="100"></el-table-column>
      <el-table-column prop="unitofmeasurement" label="计量单位" width="100"></el-table-column>
      <el-table-column prop="vendor" label="厂商" width="100"></el-table-column>
      <el-table-column label="操作" fixed="right" width="200px">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <el-button
              class="btn3"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)" disabled
            >编辑</el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <el-button
              disabled
              class="btn3"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- <div class="dayin" id="print"> -->
    <el-dialog
      style="margin-left:-25%; width:2300px;text-align:center; font-weight:bold;"
      title
      :visible.sync="dialogFormVisible"
    >
      <section ref="print" class="recordImg" id="printRecord">
        <div class="a" style="text-align:center; font-weight:bold;">
          <span class="list3">退货单</span>
          <br />
          <span class="list">收货单位____________</span>
          <br />
          <span class="list2">地址________________</span>
          <span class="list1">__年__月__日</span>
          <span class="cun">第一联:存根</span>
          <table class="edit-table" :model="out" style="text-align:center;">
            <tbody>
              <tr>
                <td style="border:3px solid black;">实际出库数量</td>
                <td style="border:3px solid black;">创建时间</td>
                <td style="border:3px solid black;">出库日期</td>
                <td style="border:3px solid black;">退货出库单号</td>
                <td style="border:3px solid black;">型号</td>
                <td style="border:3px solid black;">商品名称</td>
              </tr>
              <tr>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.actualVolume" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.createTime" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.date" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.id" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.model" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.productName" value />
                </td>
              </tr>
              <tr>
                <td style="border:3px solid black;">商品应出库数量</td>
                <td style="border:3px solid black;">备注</td>
                <td style="border:3px solid black;">供应商名称</td>
                <td style="border:3px solid black;">任务状态</td>
                <td style="border:3px solid black;">计量单位</td>
                <td style="border:3px solid black;">更新时间</td>
              </tr>
              <tr>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.quantityReturned" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.remark" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.supplierName" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.taskStatus" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.unitofmeasurement" value />
                </td>
                <td style="border:3px solid black;">
                  <input style="text-align:center;" v-model="out.updateTime" value />
                </td>
              </tr>
              <!-- <tr>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"> <input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        </tr> 
        <tr>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
              </tr>-->
              <tr>
                <td style="border:3px solid black;">合计TOTAL</td>
                <td
                  style="border:3px solid black;margin-right:20px; text-align:right"
                  colspan="5"
                >百_十_百_千_万_十万_</td>
              </tr>
            </tbody>
          </table>

          <span class="list">收货单位及经手人________</span>
          <span class="list1">送货单位及经手人_________</span>
        </div>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn2" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" class="btn22" @click="PrintRow">打 印</el-button>
        <!-- <el-button class="btn22" type="primary" @click="dialogFormVisible = false;">确 定</el-button> -->
        <!-- <span slot="footer" class="dialog-footer">
          
        </span> -->
      </div>
    </el-dialog>
    <!-- </div> -->
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {
      dialogFormVisible3: false,
      loading: true,
      dialogImageUrl: "",
      dialogVisible: false,
      imageURL: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      Return: {
        quantityReturned: "",
        model: "",
        productName: "",
        remark: "",
        supplierName: "",
        unitofmeasurement: "",
      },
      // Return:[],
      getCommodity: [],
      out: [],
      form: {
        commodityName: "",
        date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],

        supplierName: "",
      },
      total: 0,
      queryInfo: {
        query: "",
        type: 3,
        pageNum: 1,
        pageSize: 4,
      },
      pageNum: 1,
      pageSize: 2,
      rules:{
        quantityReturned: [
            { required: true, message: '请输入商品应出库数量', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          ],
        model: [
            { required: true, message: '请输入型号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        productName: [
            { required: true, message: '请输入商品名称,aaa', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符,如aaa', trigger: 'blur' }
          ],
        remark: [
            { required: true, message: '请输入备注', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],   
        supplierName: [
            { required: true, message: '请输入活动名称,string', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符,如string', trigger: 'blur' }
          ],
        unitofmeasurement: [
            { required: true, message: '请输入计量单位', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],   
      }
    };
  },
  methods: {
    //打印
    PrintRow() {
      this.$print(this.$refs.print); // 使用
      this.dialogFormVisible = false
    },
    async chaxun() {
      this.loading = true;
      const { data: res } = await this.$http.post(
        "api/send/getCommodityAndWarehouseOutVo?pageNum=" +
          this.pageNum +
          "&pageSize=" +
          this.pageSize,
        {
          //  'commodityName':this.form.commodityName,
          //  'startTime':this.form.date[0],
          //  'endTime':this.form.date[1],
          //  'pageNum':this.queryInfo.pageNum,
          //  'pageSize':this.queryInfo.pageSize,
          //  'sort':'true'
        }
      );
      if (res.code == 200) {
        console.log("分页显示入库");
        console.log(res);
        let getCommodity = res.data;
        this.getCommodity = getCommodity;
        this.total = res.total;
        console.log(getCommodity);
        this.loading = false;
      } else {
        return this.$message.error(res.msg);
      }
    },
    async chaxun1() {
      
      var year = this.form.date[0].getFullYear()
      var month = this.form.date[0].getMonth() + 1
      var day = this.form.date[0].getDate()
      var hour = this.form.date[0].getHours()
      var minutes = this.form.date[0].getMinutes()
      var second = this.form.date[0].getSeconds()
      var currentTime = year + "-" + (month<10?"0"+month:month) + "-" + (day<10?"0"+day:day) +" "+(hour<10?"0"+hour:hour)+":"+(minutes<10?"0"+minutes:minutes)+":"+(second<10?"0"+second:second)
            
      var year1 = this.form.date[1].getFullYear()
      var month1 = this.form.date[1].getMonth() + 1
      var day1 = this.form.date[1].getDate()
      var hour1 = this.form.date[1].getHours()
      var minutes1 = this.form.date[1].getMinutes()
      var second1 = this.form.date[1].getSeconds()
      var currentTime1 = year1 + "-" + (month1<10?"0"+month1:month1) + "-" + (day1<10?"0"+day1:day1) +""+" "+(hour1<10?"0"+hour1:hour1)+":"+(minutes1<10?"0"+minutes1:minutes1)+":"+(second1<10?"0"+second1:second1)
      if(this.form.commodityName == "" || this.form.supplierName == "" || this.form.startTime == "" || this.form.endTime == ""){
        return this.$message.error("查询条件不能为空")
      }else{
        this.loading = true
        const { data: res } = await this.$http.post(
        "api/send/getCommodityAndWarehouseOutVo?pageNum=" +this.pageNum +"&pageSize=" +this.pageSize,
        {
          commodityName: this.form.commodityName,
          startTime: currentTime,
          endTime: currentTime1,
          supplierName: this.form.supplierName,
        }
      );
      if(res.code == 200){
      console.log("分页显示入库");
      console.log(res);
      let getCommodity = res.data;
      this.getCommodity = getCommodity;
      this.total = res.total;
      console.log(getCommodity);
      this.loading = false
      }else{
        return this.$message.error(res.msg)
      }    

        
      }
      
    },
    //出库单
    async chuku() {
      const { data: res } = await this.$http.post(
        "/api/send/addReturnOutOfStockAddVo",
        {
          model: this.Return.model,
          productName: this.Return.productName,
          quantityReturned: this.Return.quantityReturned,
          remark: this.Return.remark,
          supplierName: this.Return.supplierName,
          unitofmeasurement: this.Return.unitofmeasurement,
        }
      );
      if (res.code == 200) {
        console.log("出库单");
        let out = res.data;
        this.dialogFormVisible = true;
        console.log(out);
        this.out = out;
        this.loading = false;
      } else {
        return this.$message.error(res.msg);
      }
    },
    handleEdit(index, row) {
      this.dialogFormVisible1 = true;
      this.getCommodity = Object.assign({}, row);
      this.getCommodity.index = index;
    },
    handleDelete(index, rows) {
      this.$confirm("此操作将删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(index, rows);
          rows.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /* 设置分页效果下的方法 */
    /* 页面大小的改变触发的方法 */
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.chaxun();
    },
    /* 页面数发送改变的时候 */
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.chaxun();
    },
    getPdf: function () {
      var title = "导出名称";
      html2Canvas(document.querySelector("#printPage"), {
        // allowTaint: true
        useCORS: true, //看情况选用上面还是下面的，
      }).then(function (canvas) {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 575.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        let PDF = new JsPDF("", "pt", "a4");
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, "JPEG", 10, 10, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 10, position, imgWidth, imgHeight); //这里的10是左右边距
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + ".pdf");
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  created() {
    this.chaxun();
  },
};
</script>
<style scoped>
*{margin: 0 auto; padding: 0px;}
.list2{
  float: left;
  margin-left: -150px;
  
}
.cun {
  margin-right: 10px;
}
.list1 {
  float: right;
  padding-right: 40px;
  margin-bottom: 10px;
}
.list3 {
  padding-top: -20px;
  font-size: 20px;
  font-weight: bold;
}
.list {
  float: left;
}
.dialog-footer {
  margin-top: -20px;
}
.edit-table {
  background: #f7f8fa;
  border-collapse: collapse;
  border: 3px solid black;
}
.btn3 {
  margin-left: 10px;
  padding: 10px;
}
.el-input {
  background-color: chartreuse;
}
.input {
  margin-top: 10px;
  width: 200px;
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: blueviolet;
}
.input2 {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.btn1 {
  background-color: rgb(32, 178, 170);
  margin-top: 10px;
  width: 120px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
}
.btn2 {
  margin-left: 400px;
  float: left;
  padding-bottom: 10px;
  padding: 10px;
}
.btn22 {
  margin-left: 100px;
  float: left;
  padding-bottom: 10px;
  padding: 10px;
}
.btn5 {
  margin-right: 100px;
  padding: 10px;
}
.dialog-footer{
  
  height: 40px;
}
</style>